<template>
    <div class="login">
        <div class="login-header">
            <span>欢迎登录车载视频界面平台</span>
        </div>
        <div class="login-body">
            <div class="login-box">
                <div class="dongwu">
                    <div class="min-hand" style="left:-40px" v-show="!isFocusPwd"></div>
                    <div class="min-hand" style="left:110px" v-show="!isFocusPwd"></div>
                    <div class="max-hand left-hand" v-show="isFocusPwd"></div>
                    <div class="max-hand right-hand" v-show="isFocusPwd"></div>
                </div>
                <ul class="login-form">
                    <li class="user">
                        <input type="text" placeholder="请输入账号" v-model="username">
                    </li>
                    <li class="pwd">
                        <input type="password" placeholder="请输入密码" v-model="password" @focus="onFocus" @blur="onBlur">
                    </li>
                    <li class="action">
                        <span class="submit-btn" @click="handleLogin">登录</span>
                        <span class="checkbox">
                            <input type="checkbox" id="checkbox" v-model="remember"  class="lay-ignore" style="width:17px;height:17px;">
                            <label for="checkbox">记住密码</label>
                        </span>
                    </li>
                </ul>
            </div>
            <div class="cloud"></div>
        </div>
        <div class="login-footer">
            版权所有 2015-2018 <a href="http://www.dz580.com">www.gps51.com</a>
        </div>
    </div>
</template>

<script>
    export default {
        name:'Login',
        data() {
            return {
                isFocusPwd: false,
                remember:true,
                username:'minigps',
                password:'123456'
            }
        },
        methods: {

            onFocus() {
                this.isFocusPwd = true;
            },
            onBlur(){
                this.isFocusPwd = false;
            },
            handleLogin(){
                this.$store.dispatch('handleLogin',{ username:this.username, password :this.password}).then((resp)=>{
                    console.log(resp)
                    // let data = resp.data;
                    // if(data.status == 0 ){
                    //     this.$router.push('/');
                    // }
                })
            }
        },
    }
</script>

<style scoped lang='less'>
    .login{
        width: 100%;
        height:100%;
        background: url('./images/loginbg3.png') #1C77AC no-repeat center center;
        position: relative;
        min-width: 700px;
        min-height: 682px;
        &-header{   
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            height: 47px;
            background-color: #15557B;
            line-height: 47px;
            font-size: 12px;
            span{
                margin-left: 40px;
                color: #DDDDDD;
            }
        }
        &-footer{
            position: absolute;
            left: 0;
            bottom: 0;
            right: 0;
            height: 50px;
            line-height: 50px;
            text-align: center;
            background-color: #448FBB;
            color: #0B3A58;
            >a{
                color: #060606;
            }
        }
        &-body{
            position: absolute;
            top: 47px;
            left: 0;
            right: 0;
            height: 585px;
            overflow: hidden;
            .cloud{
                position: absolute;
                top: 72px;
                right: 20%;
                width: 400px;
                height: 200px;
                background: url('./images/cloud.png') no-repeat center center;
                z-index: 0;

            }
            .login-box{
                position: absolute;
                left: 50%;
                top: 60%;
                width: 692px;
                height: 336px;
                background: url('./images/logininfo.png') no-repeat center center;
                margin-top:-168px;
                margin-left: -346px;
                .dongwu{
                    position: absolute;
                    left: 66px;
                    top: -79px;
                    width: 97px;
                    height: 92px;
                    background: url('./images/tou.png') no-repeat center center;
                    .min-hand{
                        width: 30px;
                        height: 20px;
                        position: absolute;
                        bottom: -2px;
                        background: url('./images/hand.png') no-repeat center center;
                    }
                    .max-hand{
                        width: 32px;
                        height: 37px;
                        position: absolute;
                        bottom: 6px;
                    }
                    .left-hand{
                        left: 10px;
                        background: url('./images/left_hand.png') no-repeat center center;
                    }
                    .right-hand{
                        left: 55px;
                        background: url('./images/right_hand.png') no-repeat center center;
                    }
                }
                .login-form{
                    height: 181px;
                    margin: 88px 0 0 285px;
                    list-style:none;
                    >li{
                        height: 48px;
                        margin-bottom: 25px;
                        input{
                            border: 0;
                            outline: none;
                            padding-left: 42px;
                            height: 100%;
                            width: 342px;
                            background-color: transparent;
                        }
                       span{
                           font-size: 14px;
                       }
                    }
                    .user{
                        background: url('./images/user.png') no-repeat 0 center;
                    }
                    .pwd{
                        background: url('./images/pwd.png') no-repeat 0 center;
                    }
                    >li.action{
                        height: 35px;
                        span{
                            margin-right: 25px;
                            float: left;
                        }
                        .submit-btn{
                            display: inline-block;
                            width: 250px;
                            height: 35px;
                            line-height: 35px;
                            text-align: center;
                            background-image: url('./images/buttonbg.png');
                            background-size: 250px 35px;
                            color: #fff;
                            cursor: pointer;
                            
                        }

                    }
                }
            }

        }
        .login-footer{
            font-size: 14px;
        }
    }

    @keyframes movement {
        0% { left: -10%; }
        100% {  left: 110%; }
    }
    @-webkit-keyframes movement {
        0% { left: -10%; }
        100% {  left: 100%; }
    }
    @-moz-keyframes movement {
        0% { left: -10%; }
        100% {  left: 100%; }
    }
    @-o-keyframes movement {
        0% { left: -10%;}
        100% {  left: 100%; }
    }
</style>